<template>
  <view class="container">
    <view class="content">
      <view class="top_box">
        <view class="kong"></view>
        <view class="top1 flexs2">
          <image class="up_img"
                 src="../../static/image/bs_back.png"
                 @click="goBack"></image>
          <view class="titles">我的会员</view>
          <view class="status">
          </view>
        </view>
        <view class="info_box">
          <view class="info_avatar">
            <image :src="vipInfo.avatar?$serverIp+vipInfo.avatar:'../../static/image/gexx_img_mrtx@2x.png'"
                   mode=""></image>
          </view>
          <view class="info_left">
            <view class="info_name">{{vipInfo.nickname}}</view>
            <view class="info_time">{{vipInfo.vip_overtime}}</view>
          </view>
          <!-- <image class="tiao_btn" src="../../static/image/quan_img.png" @click="goNext"></image> -->
        </view>
        <view class="right_box">
          <view class="right_item">
            <image src="../../static/image/wdhy_ico_zk@2x.png"
                   mode=""></image>
            <view class="right_title">会员专属折扣</view>
          </view>
          <view class="line"></view>
          <view class="right_item">
            <image src="../../static/image/wdhy_ico_lw@2x.png"
                   mode=""></image>
            <view class="right_title">敬请期待</view>
          </view>
        </view>

      </view>
      <view class="list_box">
        <view class="list_title">会员开通</view>
        <view class="list_item_box">
          <view class="list_item"
                :class="{'chooseactive':typeindex==1}"
                @click="choose(1,vipInfo.month_vip)">
            <view class="list_item_name">月会员</view>
            <view class="list_item_money">￥<text style="font-size: 54rpx;">{{vipInfo.month_vip}}</text></view>
          </view>
          <view class="list_item"
                :class="{'chooseactive':typeindex==2}"
                @click="choose(2,vipInfo.year_vip)">
            <view class="list_item_name">年会员</view>
            <view class="list_item_money">￥<text style="font-size: 54rpx;">{{vipInfo.year_vip}}</text></view>
          </view>
        </view>
      </view>
      <view class="list_btn"
            @click="goOpen">{{vipInfo.operate}}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      typeindex: 1,
      vipInfo: [],
      // urls: this.$common.baseUrl,
      vipmoney: ''
    }
  },
  onLoad() {
    this.getVipInfo()
  },
  methods: {
    //user/get_user_info
    goOpen() {
      // const { data } = await this.$http.post('user/get_user_info')
      // console.log(data)
      uni.navigateTo({
        url: '../payment/payment?money=' + this.vipmoney + '&type=' + this.typeindex
      })
    },
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    choose(type, vip) {
      this.vipmoney = vip
      this.typeindex = type
    },
    //zhang/vip/get_info
    async getVipInfo() {
      const { data } = await this.$http.post('/zhang/vip/get_info')
      console.log(data)
      this.vipInfo = data.data
      this.vipmoney = this.vipInfo.month_vip
    }
  }
}
</script>

<style>
.flexs2 {
  display: flex;
  justify-content: flex-start;
}
.content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: #ffffff;
}
.top_box {
  height: 393rpx;
  width: 100%;
  /* #ifdef APP-PLUS */
  height: 453rpx;
  /* #endif */
  background-image: url(../../static/image/wdhy_img_bg@2x.png);
  background-size: 100% 100%;
}
.kong {
  width: 100%;
  height: var(--status-bar-height);
}
.top1 {
  width: 100%;
  height: 89rpx;
  padding: 26rpx;
}
.up_img {
  width: 20rpx;
  height: 36rpx;
}
.titles {
  flex-grow: 1;
  text-align: center;
  font-size: 34rpx;
  color: #ffffff;
}
.info_box {
  width: 100%;
  height: 200rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 0 0 30rpx;
  /* border:1px solid red */
}
.info_avatar image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}
.info_left {
  width: 400rpx;
  margin-left: 40rpx;
  height: 90rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
}
.info_name {
  height: 31rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
}
.info_time {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.tiao_btn {
  width: 160rpx;
  height: 46rpx;
}
.right_box {
  width: 92%;
  height: 140rpx;
  background: #ffffff;
  box-shadow: 0px 2rpx 16rpx 0px rgba(51, 46, 16, 0.13);
  border-radius: 10rpx;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.right_item {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.right_item image {
  width: 59rpx;
  height: 59rpx;
}
.line {
  width: 2rpx;
  height: 99rpx;
  opacity: 0.5;
  background-color: #d9d9d9;
}
.list_box {
  width: 92%;
  height: 320rpx;
  margin: auto;
  margin-top: 100rpx;
}
.list_title {
  width: 100%;
  height: 90rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.list_item_box {
  width: 100%;
  height: 214rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.list_item {
  width: 214rpx;
  height: 214rpx;
  /* background: #FFFAE6; */
  border: 1rpx solid #cccccc;
  border-radius: 10rpx;
  margin-right: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.chooseactive {
  width: 214rpx;
  height: 214rpx;
  background: #fffae6;
  border: 1rpx solid #ffdd47;
  border-radius: 10rpx;
}
.list_item_name {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-bottom: 20rpxs;
}
.list_item_money {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ff4145;
}
.list_btn {
  width: 86%;
  height: 88rpx;
  background: #ffdd47;
  border-radius: 10rpx;
  position: absolute;
  bottom: 3%;
  left: 6.7%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  font-weight: 500;
  color: #333333;
}
</style>

